#パディング

チャートオプションのパディング値は、いくつかの異なる形式で指定できます。

#番号

この値が数値の場合、すべての側面 (左、上、右、下) に適用されます。

たとえば、チャートのすべての側面に 20 ピクセルのパディングを定義します。

let chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        layout: {
            padding: 20
        }
    }
});

#{上、左、下、右} オブジェクト

この値がオブジェクトの場合、leftプロパティは左パディングを定義します。同様に、c140ee9d-5765-4eab-a4a5-27c922dbbbf6、topとbottomプロパティも指定できます。省略されたプロパティのデフォルトは0。

チャートキャンバスの左側に 50 ピクセルのパディングを追加したいとします。次のようにします。

let chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        layout: {
            padding: {
                left: 50
            }
        }
    }
});

#{x, y} オブジェクト

これは、左/右と上/下を同じ値に定義するための省略表現です。

たとえば、放射状リニア軸上の左/右 10 ピクセル、上/下 4 ピクセルのパディングティックの背景パディング:

let chart = new Chart(ctx, {
    type: 'radar',
    data: data,
    options: {
        scales: {
          r: {
            ticks: {
              backdropPadding: {
                  x: 10,
                  y: 4
              }
            }
        }
    }
});

←オプションパフォーマンス→